<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>元素显示模式</title>
</head>
<body>
  <!-- 
    块元素（block），又称块级元素，特点：
      1. 在页面中独占一行，不会与任何元素共用一行，是从上到下排列的
      2. 默认宽度：撑满父元素
      3. 默认高度：由内容撑开
      4. 可以通过 css 设置宽高
      
      块元素的标签包括：
        1. 主体结构标签：html、body
        2. 排版标签：h1~h6、p、div、hr、pre
        3. 列表标签：ul、ol、li、dl、dt、dd
        4. 表格相关标签：table、tbody、thead、tfoot、tr、caption
        5. form 与 option
    行内元素（inline），又称内联元素，特点：
      1. 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列
      2. 默认宽度：由内容撑开
      3. 默认高度：由内容撑开
      4. 无法通过 CSS 设置宽高

      行内元素的标签包括：
        1. 文本标签：br、em、strong、sup、sub、del、ins
        2. a 与 label
    行内块元素（inline-block），又称内联块元素，特点：
      1. 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列
      2. 默认宽度：由内容撑开
      3. 默认高度：由内容撑开
      4. 可以通过 CSS 设置宽度

      行内块元素的标签包括：
        1. 图片 img
        2. 单元格 td、th
        3. 表单控件 input、textarea、select、button
        4. 框架标签 iframe
    使用 display 可以修改元素的显示模型
   -->
</body>
</html>